<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			@charset"utf-8";
			html,body,div,span,a,img,em,i,h1,h2,h3,h4,h5,h6,ul,ol,li,form,input,textarea,select,button,header,nav,section,article,aside,address,abbr,blockquote,iframe,thead,tbody,tfoot,fieldset,figure,code,caption,del,dfn,dl,dt,dd,p,q,pre,object,legend,hgroup{margin:0;padding:0;border:0;outline:0;box-sizing:border-box;}
			:after,:before{box-sizing:border-box}
			html,body{position:absolute;top:0;left:0;right:0;bottom:0;font-family:'Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', sans-serif;font-size:14px;overflow:hidden;}
			img,span,p,h1,h2,h3,h4,h5,h6{overflow:hidden}
			table{border-spacing:0;border-collapse:collapse}
			textarea{overflow:auto;resize:none;vertical-align:top}
			button,select{overflow:visible;cursor:pointer}
			a{text-decoration:none;color:inherit;}
			:active,:focus,:hover,:link,:visited{outline:0;text-decoration:none;}
			li,ol,ul{list-style:none}
			button,img,span,a{display: inline-block;}
			body{padding:100px;}
			#div{position:relative;width:600px;height:600px;}
			#div div{position:absolute;text-align:center;color:#fff;}
			.Header{top:0;left:0;right:0;height:50px;background-color:#f00;line-height:50px;}
			.Left{left:0;top:50px;bottom:100px;width:100px;background-color:#8ac;line-height:400px;}
			.Middle{top:50px;bottom:100px;left:100px;right:150px;background-color:#f60;line-height:400px;}
			.Right{top:50px;bottom:100px;right:0;width:150px;background-color:#28c;line-height:400px;}
			.Footer{left:0;bottom:0;right:0;height:150px;background-color:#0a8;line-height:150px;}
		</style>
	</head>
	<body>
		<div id="div">
			曾经
				头部
			有一份真挚的爱情摆在我的面前
			
			我没有好好珍惜
				左边
			等到失去时
			
			才感到后悔
				中间
			如果老天能够再给我一次机会
			
			我会对那个女孩说
				右边
			我爱你
			
			如果非要在这个爱上加个期限的话
				底部
			我希望是一万年
		</div>
		<script>
			var HTML = document.getElementById('div').innerHTML;
			var json = {
				"曾经"								:	"<div class=Header>",
				"有一份真挚的爱情摆在我的面前"		:	"</div>",
				"我没有好好珍惜"					:	"<div class=Left>",
				"等到失去时"						:	"</div>",
				"才感到后悔"						:	"<div class=Middle>",
				"如果老天能够再给我一次机会"		:	"</div>",
				"我会对那个女孩说"					:	"<div class=Right>",
				"我爱你"							:	"</div>",
				"如果非要在这个爱上加个期限的话"	:	"<div class=Footer>",
				"我希望是一万年"					:	"</div>"
			}
			
			for(i in json){
				var re = new RegExp(''+i+'','gi');
				HTML = HTML.replace(re,json[i]);
			}
			document.getElementById('div').innerHTML = HTML;
		</script>
	</body>
</html>